/**
 * @Date 2023-02-02 16:10:45
 * @Remark
 */

// react
import React, { useEffect, useState } from "react";
// lib
import _ from "lodash";
import { Modal, Checkbox, Row, Col } from "antd";
// components & widget
// style
// config
import { MODULE_NAME } from "../config";
// script & methods & public
// store
import { observer } from "mobx-react";
import { statePermissionModal } from "./state";
import { dataState } from "state/global";
// controller
import { editRolePermission } from "./controller";
// interface
// 其它

function PermissionModal() {
  const info = statePermissionModal.getModal();

  const title = `编辑${MODULE_NAME} ${info ? info.name : ""} 的权限`;
  const show = !_.isNull(info);
  const [PList, setPList] = useState<PermissionListDto[]>([]);

  const handleCancel = () => {
    statePermissionModal.modal = null;
  };
  const onChange = (value: any) => {
    editRolePermission(value);
  };

  useEffect(() => {
    // const valueMap: any = {};
    const list: PermissionListDto[] = []
    dataState.permissionList.forEach((item:PermissionDto )=> {
      let find = false;
      for (let i = 0; i < list.length; i++) {
        const element = list[i];
        if (element.top === item.top) {
          element.data.push(item)
          find = true
          break
        }
      }
      if(!find){
        list.push({ top: item.top, data: [item] })
      }
    })
    setPList(list)
  }, [show]);

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      destroyOnClose
      footer={null}
      maskClosable
      forceRender
      width={900}
    >
      <Checkbox.Group
              className="form-input-full"
              style={{
                display: "block",
              }}
              value={statePermissionModal.getTargetKeys()}
              disabled={statePermissionModal.modalLoading}
              onChange={onChange}
            >
              {_.map(PList, (el,key) => {
               return (<>
                               <Row className="mt-30">
                <Col span={24} >
            <span style={{fontSize:"20px"}}>{el.top}</span>
            </Col>
              </Row>
                <Row className="mt-10">

                  {el.data.map((it: PermissionDto) => {
                    return (
                      <Col className="mt-10" span={4} key={it.id}>
                        <Checkbox value={it.id}>{it.name}</Checkbox>
                      </Col>
                    );
                  })}
                  </Row>
                </>)
              })
            }       
            </Checkbox.Group>
    </Modal>
  );
}

export default observer(PermissionModal);
